<template>
	<view class="container">
		<uni-nav-bar left-icon="back" @clickLeft="back"  title="登录"></uni-nav-bar>

		<view class="banner"></view>
		<view class="content">
		<view class="form" >
		<view class="title">
				<view class="login-title">登录</view>
				<view class="login-desc">未注册用户将自动注册</view>
			</view>
	<view class="input-group">
			<input type="number" class="input-mobile"  v-model="mobile" placeholder="输入您的手机号" placeholder-style="font-size: 30rpx;color:#9A9BA0"> </input>
					<view class="input-mobile">
						<input type="number" placeholder="输入您的验证码" v-model="code" />
						<button class="capta-button" v-if="!is_send" @click="sendCode"> 发送验证码</button>
						<button class="capta-button" v-if="is_send" > {{num}}s</button>
					</view>
			</view>
			<button  size="medium" class="form-submit" @click="handlesubmit">立即登录</button>
			<view class="xieyi">注册/登录代表您同意<text>《厂房帝用户使用协议》</text></view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				mobile:'',
				is_send:false,
				num:60  ,//倒计时
				code:'',//验证码
			};
		},
		onBackPress(options){
			console.log(options)
		},
		methods:{
			back(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			sendCode(){

				if(this.verifyMobile()){
					uni.showLoading({
						title:'发送中'
					})
						//可以发送
						this.$api.sendVerifyCode({mobile:this.mobile}).then(
						res=>{
							uni.hideLoading()
							uni.showToast({
									icon:"none",
									title:"发送成功"
								})
								this.is_send=true
								this.interval()
						}
						)
				}
			},
			interval(){
				let intervalID=setInterval(()=>{
					if(this.num>0){
						this.num--
					}else{
						this.num=60
						this.is_send=false
						clearInterval(intervalID)
					}

				},1000)
			},
			verifyMobile(){
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请填写手机号码"
					})
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
					uni.showToast({
						icon:"none",
						title:"手机号码有误"
					})

					return false
					}
					return true
			},
			//处理登录
			handlesubmit(event){
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请填写手机号码"
					})
					return false
				}
				uni.showLoading({
					title:'登录中'
				})
				this.$api.login({mobile:this.mobile,code:this.code}).then(
					res=>{
						//#ifdef MP-TOUTIAO
							this.$toutiao(1)
						//#endif
						uni.hideLoading()
						console.log(res)
						uni.setStorageSync('token',res.data.access_token)
						uni.showToast({
							title:'登录成功',
							success: () => {
								uni.switchTab({
									url:'/pages/user/user'
								})
							}
						})
					console.log('token',	  uni.getStorageSync('token') )
					}
				)
				/* uni.redirectTo({
					url:"/pages/user/user"
				}) */
			}

		}
	}
</script>

<style lang="scss" scoped>

	.container{
		.banner{
			background: url(https://pic.fhshidai.com/filefB8AFFbQL0KYPnWT9w1F78ufOAz5B1kVJ1XEaCtC.png) ;
			background-size: 750rpx 400rpx;
			width: 750rpx;
			height: 400rpx;
		}
		.content{
			background: rgba(192,7,11,1);
			.form{
				position: relative;
				top: -64.6rpx;
				padding-left: 41rpx;
				padding-right: 41rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
				height:842rpx;
				background:#FFFFFF;
				border-radius:10rpx;
				.title{
					position: relative;
					top: 64rpx;
					display: flex;
					.login-title{
						font-size: 50rpx;
						color: #313131;
						font-weight: bold;
						margin-right: 10rpx;
					}
					.login-desc{
						font-size:24rpx;
						font-weight:400;
						line-height:90rpx;
						color: $uni-text-color-placeholder;

					}

				}
				.input-group{
					position: relative;
					top: 64rpx;
					input{
						font-size: 30rpx;
					}
					.input-mobile{
						height: 132rpx;
						border-bottom: 1rpx solid $uni-border-color;
						display: flex;
						align-items: center;
						.input-capka{
							float: left;
								height: 132rpx;
								width: 400rpx;
						}
						.capta-button{
							float: left;
							background:#F8F8F6 ;
							width: 186rpx;
							height: 75rpx;
							line-height: 75rpx;
							color: #494949;
							font-size: 24rpx;
						}
					}


				}
				.xieyi{
					text-align: center;
					position: relative;
					font-size:24rpx ;
					top: 173rpx;
					color: #9A9BA0;
					text{
						color: #E0393D;
					}

				}
				//登录按钮
				.form-submit{
					position: relative;
					top: 153rpx;
					width: 603rpx;
					height: 90rpx;
					color: #FFFFFF;
					border-radius: 45rpx;
					background-color:#E0393D ;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}

</style>
